timmypidashev/web
1
0
Fork 0
mirror of https://github.com/timmypidashev/web.git synced 2026-04-14 11:03:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

begin work on assignments

Browse Source
This commit is contained in:
Timothy Pidashev
2022-01-08 17:49:48 -08:00
parent 3c371383d5
commit f134a3c3d5
6 changed files with 58 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
assignments.html
View File

@@ -11,9 +11,23 @@
<body> <body>
<div class="wrapper"> <div class="wrapper">
<div class="container"> <div class="container">
<h1 class="hero__header" data-aos="zoom-out">Assignments</h1> <h1 class="hero__header" data-aos="zoom-out">Lesson 1</h1>
<div class="assignment"> <div class="assignment">
<button data-aos="zoom-in">Test</button> <button data-aos="zoom-in" id="1.1">Warmup</button>
<button data-aos="zoom-in" id="1.2">Classwork</button>
<button data-aos="zoom-in" id="1.3">Assignment</button>
</div>
<h1 class="hero__header" data-aos="zoom-out">Lesson 2</h1>
<div class="assignment">
<button data-aos="zoom-in" id="2.1">Warmup</button>
<button data-aos="zoom-in" id="2.2">Classwork</button>
<button data-aos="zoom-in" id="2.3">Assignment</button>
</div>
<h1 class="hero__header" data-aos="zoom-out">Lesson 3</h1>
<div class="assignment">
<button data-aos="zoom-in" id="3.1">Warmup</button>
<button data-aos="zoom-in" id="3.2">Classwork</button>
<button data-aos="zoom-in" id="3.3">Assignment</button>
</div> </div>
</div> </div>
</div> </div>
@@ -28,5 +42,15 @@
duration: 800 duration: 800
}); });
</script> </script>
<script>
const assignments = document.querySelectorAll('.assignment button');
assignments.forEach(assignment => {
assignment.addEventListener('click', (e) => {
const lesson = e.target.id.split(':')[0];
const assignment = e.target.id.split(':')[1];
window.location.href = `python/assignments/${lesson}.html`;
});
});
</script>
</body> </body>
</html> </html>

35
css/assignments.less
View File

@@ -51,7 +51,7 @@ background: linear-gradient(to bottom right, #333333 0%, #333333 100%);
// width: 100%; // width: 100%;
// height: 400px; // height: 400px;
// margin-top: -200px; // margin-top: -200px;
overflow: hidden; overflow: visible;
&.form-success{ &.form-success{
.container{ .container{
@@ -60,6 +60,30 @@ background: linear-gradient(to bottom right, #333333 0%, #333333 100%);
} }
} }
} }
&.form-error{
.container{
.assignment{
button{
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
}
}
}
}
} }
.container{ .container{
@@ -100,9 +124,14 @@ background: linear-gradient(to bottom right, #333333 0%, #333333 100%);
cursor: pointer; cursor: pointer;
font-size: 18px; font-size: 18px;
transition-duration: 0.25s; transition-duration: 0.25s;
margin-bottom: 20px;
&:hover{ &:hover{
background-color: rgb(245, 247, 249); // add a shadow
box-shadow: 0px 5px 10px rgba(0,0,0,0.25);
// change the background color
background: #53e3a6;
} }
} }
} }

0
js/python/editor.js → python/assignments/1.1.html
View File

0
python/assignments/1.2.html Normal file
View File

0
python/assignments/1.3.html Normal file
View File

0
python/editor.js Normal file
View File