Проекты создаются не абы как, а через template
This commit is contained in:
parent
421d3c028d
commit
659c86538d
3 changed files with 25 additions and 42 deletions
|
@ -21,7 +21,7 @@
|
|||
<link rel="stylesheet" type="text/css" href="/static/resources/styles/about.style.css"/>
|
||||
<link rel="icon" type="image/x-icon" href="/static/resources/images/favicon.png">
|
||||
<title>Mootfrost — обо мне</title>
|
||||
<meta name="description" content="About mootfrost.">
|
||||
<meta name="description" content="About me">
|
||||
</head>
|
||||
|
||||
<body id="particles-js" ondragstart="return false;" ondrop="return false;">
|
||||
|
@ -40,7 +40,7 @@
|
|||
</div>
|
||||
|
||||
<footer class="unselectable">
|
||||
<p class="footer-text">v0.5</p>
|
||||
<p class="footer-text">v0.6</p>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
|
@ -53,12 +53,11 @@
|
|||
},
|
||||
);
|
||||
let code_stats = await resp.json()
|
||||
console.log(code_stats)
|
||||
let about = document.getElementById('code-stats')
|
||||
|
||||
about.innerHTML += `С ${code_stats['since']}: ` + code_stats['total'] + '<br/>'
|
||||
|
||||
about.innerHTML += 'Из них на:' + '<br/>'
|
||||
|
||||
for (let language in code_stats['languages']) {
|
||||
about.innerHTML += language + ' - ' + code_stats['languages'][language] + '<br/>'
|
||||
}
|
||||
|
@ -72,9 +71,8 @@
|
|||
},
|
||||
);
|
||||
let age = await resp.json()
|
||||
console.log(age)
|
||||
let about = document.getElementById('about')
|
||||
|
||||
let about = document.getElementById('about')
|
||||
about.innerHTML = about.textContent.replace('{age}', age)
|
||||
}
|
||||
load_age()
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
<link rel="stylesheet" type="text/css" href="/static/resources/styles/index.style.css"/>
|
||||
<link rel="icon" type="image/x-icon" href="/static/resources/images/favicon.png">
|
||||
<title>Mootfrost</title>
|
||||
<meta name="description" content="mootfrost.">
|
||||
<meta name="description" content="Mootfrost">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
|
||||
|
@ -49,7 +49,7 @@
|
|||
</div>
|
||||
|
||||
<footer>
|
||||
<p class="footer-text">v0.5</p>
|
||||
<p class="footer-text">v0.6</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -21,27 +21,31 @@
|
|||
<link rel="stylesheet" type="text/css" href="/static/resources/styles/projects.style.css"/>
|
||||
<link rel="icon" type="image/x-icon" href="/static/resources/images/favicon.png">
|
||||
<title>Mootfrost - проекты</title>
|
||||
<meta name="description" content="mootfrost.">
|
||||
<meta name="description" content="My projects">
|
||||
</head>
|
||||
<body id="particles-js" ondragstart="return false;" ondrop="return false;">
|
||||
<div class="title-menu top">
|
||||
<div class="title-div title-container">
|
||||
<h1 class="title unselectable">проекты:</h1>
|
||||
<div class="contents-div projects-container horizontal-container" id="projects-list">
|
||||
<template> href="https://google.com" class="projects-contents"><div class="button-div project-container">
|
||||
<h2 class="projects-title">Name</h2>
|
||||
<hr class="rounded">
|
||||
<p class="projects-contents">Description</p>
|
||||
</div></a> </template>
|
||||
<div class="contents-div projects-container horizontal-container" id="projects-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p class="footer-text">v0.5</p>
|
||||
<p class="footer-text">v0.6</p>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
<template id="project-card-template">
|
||||
<a class="projects-contents" id="link" href="https://google.com/">
|
||||
<div class="button-div project-container">
|
||||
<h2 class="projects-title" id="title">Name</h2>
|
||||
<hr class="rounded">
|
||||
<p class="projects-contents" id="description">Description</p>
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script src="/static/resources/scripts/plugins/particles/particles.min.js"></script>
|
||||
<script src="/static/resources/scripts/script.js"></script>
|
||||
<script>
|
||||
|
@ -52,33 +56,14 @@
|
|||
},
|
||||
);
|
||||
let projects = await resp.json()
|
||||
let proj_list = document.getElementById('projects-list')
|
||||
|
||||
for (let i = 0; i < projects.length; i++) {
|
||||
let project = projects[i]
|
||||
let card = document.importNode(document.getElementById('project-card-template').content, true)
|
||||
card.querySelector('#link').href = projects[i].html_url
|
||||
card.querySelector('#title').innerText = projects[i].name
|
||||
card.querySelector('#description').innerText = projects[i].description
|
||||
|
||||
let h2 = document.createElement('h2')
|
||||
h2.textContent = project['name']
|
||||
h2.classList.add('projects-title')
|
||||
|
||||
let hr = document.createElement('hr')
|
||||
hr.classList.add('rounded')
|
||||
|
||||
let p = document.createElement('p')
|
||||
p.classList.add('projects-contents')
|
||||
p.textContent = project['description']
|
||||
|
||||
let div = document.createElement('div')
|
||||
div.classList.add('button-div')
|
||||
div.classList.add('project-container')
|
||||
div.appendChild(h2)
|
||||
div.appendChild(hr)
|
||||
div.appendChild(p)
|
||||
|
||||
let a = document.createElement('a')
|
||||
a.classList.add('projects-contents')
|
||||
a.href = project['url']
|
||||
a.appendChild(div)
|
||||
proj_list.appendChild(a)
|
||||
document.getElementById('projects-list').appendChild(card)
|
||||
}
|
||||
}
|
||||
load_projects()
|
||||
|
|
Loading…
Add table
Reference in a new issue