iCodeThis/app.js at main · parveen232/iCodeThis · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
const projects = [
	{
		name: 'cc04-my-cart',
		languages: ['html', 'css', 'js'],
		github: 'https://github.com/parveen232/iCodeThis/tree/main/cc04-my-cart'
	},
	{
		name: 'cc06-collections-list',
		languages: ['html', 'css', 'js'],
		github: 'https://github.com/parveen232/iCodeThis/tree/main/cc06-collections-list'
	},
	{
		name: 'cc03-product-info',
		languages: ['html', 'css', 'js'],
		github: 'https://github.com/parveen232/iCodeThis/tree/main/cc03-product-info'
	},
	{
		name: 'cc05-mobile-menu',
		languages: ['html', 'css', 'js'],
		github: 'https://github.com/parveen232/iCodeThis/tree/main/cc05-mobile-menu'
	},
	{
		name: 'cc02-select-plan',
		languages: ['html', 'css', 'js'],
		github: 'https://github.com/parveen232/iCodeThis/tree/main/cc02-select-plan'
	},
	{
		name: 'cc01-users-list',
		languages: ['html', 'css'],
		github: 'https://github.com/parveen232/iCodeThis/tree/main/cc01-users-list'
	}
];

const list = document.querySelector('.list');

projects.forEach(({name, languages, github }) => {
    const listItem = document.createElement('li');
	listItem.classList.add('item');

    listItem.innerHTML = `
                <div class="img-container">
                    <a href="/${name}/index.html">
                        <img src="/${name}/img/ss-desktop.png" alt="${name}" />
                    </a>
                </div>
                <div class="project-name">
                    <a href="/${name}/index.html">
                        ${modifyName(name)}
                    </a>
				</div>
                <div class="languages">
                    ${addLang(languages)}
                </div>
                <div class="links">
                    <a href="${github}">
                        <ion-icon name="logo-github"></ion-icon>
                        GitHub
                    </a>
                    <a href="/${name}/index.html">
                        <ion-icon name="open-outline"></ion-icon>
                        Live Demo
                    </a>
                </div>
            `;

    list.appendChild(listItem);
});


function modifyName(name) {
	return name
		.slice(5)
        .split('-')
        .map(word => word[0].toUpperCase() + word.slice(1))
        .join(' ');
}

function addLang(langArr) {
    const spanColl = document.createElement('div');

    for (const lang of langArr) {
        const spanEl = document.createElement('span');

        if (lang == 'html') {
            spanEl.classList.add('html-clr');
        }
        if (lang == 'css') {
            spanEl.classList.add('css-clr');
        }
        if (lang == 'js') {
            spanEl.classList.add('js-clr');
        }

        spanEl.innerHTML = lang.toUpperCase();
        spanColl.appendChild(spanEl);
    }
    const result = spanColl.innerHTML;
    spanColl.remove();
    return result;
}