franpcode/Vanilla-Javascript-Counter
1
0
Fork 0
mirror of https://github.com/FranP-code/Vanilla-Javascript-Counter.git synced 2025-10-12 23:52:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Styles added

Browse Source
This commit is contained in:
Francisco Pessano
2022-01-21 22:27:03 -03:00
parent bdb5b0f0a0
commit 62520df89d
6 changed files with 308 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
index.html
View File

@@ -4,18 +4,30 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript counter</title> <title>Javascript Counter</title>
<script src="./script.js"></script> <script src="./script.js"></script>
<link rel="stylesheet" href="styles.css">
</head> </head>
<body> <body>
<div class="header-container">
<header>
<h1>Vanilla JavaScript Counter</h1>
</header>
</div>
<form id="form"> <form id="form">
<div class="input-container">
<label>Thing to count</label> <label>Thing to count</label>
<input type="number"> <input type="number" placeholder="Number" required min="0">
</div>
<div class="input-container">
<label>Seconds between number and number</label> <label>Seconds between number and number</label>
<input type="number"> <input type="number" placeholder="Number" required min="0">
</div>
<button id="form-button">START</button> <button id="form-button">START</button>
</form> </form>
<div class="container">
<div class="counter-element-container">
<div id="counter-element"> <div id="counter-element">
</div> </div>

21
script.js
View File

@@ -1,4 +1,4 @@
function counter(number, seconds, e) { function counter(number, seconds, e, button) {
e.preventDefault() e.preventDefault()
@@ -6,16 +6,15 @@ function counter(number, seconds, e) {
const counterElement = document.getElementById('counter-element') const counterElement = document.getElementById('counter-element')
let counterNumber = 0 let counterNumber = 0
counterElement.innerText = counterNumber
const button = document.getElementById("form-button") button.disabled = true
function setTimeOutFunction() { function setTimeOutFunction() {
counterElement.innerText = counterNumber
counterNumber++ counterNumber++
counterElement.innerText = counterNumber
if (counterNumber <= number) { if (counterNumber < number) {
button.disabled = true button.disabled = true
setTimeout(setTimeOutFunction, seconds) setTimeout(setTimeOutFunction, seconds)
@@ -41,10 +40,16 @@ window.onload = () => {
const buttonFunction = (e) => { const buttonFunction = (e) => {
const formElement = document.getElementById('form') const formElement = document.getElementById('form')
const thingToCount = formElement.children[1].value const thingToCount = formElement.children[0].children[1].value
const seconds = formElement.children[3].value const seconds = formElement.children[1].children[1].value
counter(thingToCount, seconds, e) if (!thingToCount || !seconds) {
alert('Fill all inputs!')
return
}
counter(thingToCount, seconds, e, button)
} }
button.addEventListener("click", buttonFunction) button.addEventListener("click", buttonFunction)

106
styles.css
View File

@@ -1,3 +1,109 @@
* {
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body {
background: #ee3172;
background: linear-gradient(135deg, #ee3172 0%, #1079d1 82%);
height: 100%;
font-family: Helvetica, sans-serif;
}
.header-container {
display: flex;
justify-content: center;
}
.header-container header {
width: 60%;
padding: 3vh 0px;
display: flex;
justify-content: center;
border-bottom: 2px solid #fff;
margin-bottom: 5vh;
}
.header-container header h1 {
color: #fff;
user-select: none;
}
form {
display: flex;
flex-direction: column;
align-items: center;
padding: 0px 0px 5vh 0px;
}
form .input-container {
display: flex;
flex-direction: column;
width: 20vw;
margin-bottom: 2vh;
}
form .input-container label {
color: #fff;
margin-bottom: 0.5vh;
}
form .input-container input {
border: none;
border-bottom: 1px solid #fff;
background: none;
outline: none;
color: #fff;
}
form .input-container input::placeholder {
color: rgba(255, 255, 255, 0.685);
}
form button {
width: 20vw;
height: 5vh;
box-sizing: border-box;
border: none;
border: 2px solid rgba(255, 255, 255, 0.699);
border-radius: 15px;
font-weight: bold;
color: #fff;
background: rgba(255, 255, 255, 0.1);
transition: 0.3s ease-in-out;
user-select: none;
}
form button:hover {
background: rgba(255, 255, 255, 0.4);
transition: 0.3s ease-in-out;
}
form button:disabled {
opacity: 20%;
transition: 0.3s ease-in-out;
}
form button:disabled:hover {
background: rgba(255, 255, 255, 0.1);
}
.counter-element-container {
display: flex;
flex-direction: column;
align-items: center;
}
.counter-element-container #counter-element {
color: #fff;
font-weight: bold;
font-size: 45pt;
}
@media (max-width: 768px) {
.header-container header {
width: 100%;
}
form .input-container {
width: 80vw;
}
form button {
width: 80vw;
}
}
/*# sourceMappingURL=styles.css.map */ /*# sourceMappingURL=styles.css.map */

2
styles.css.map
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"styles.css"} {"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA;EAEI;EACA;;;AAGJ;EAEI;;;AAGJ;EACI;EACA;EAEA;EAEA;;;AAGJ;EAEI;EACA;;AAEA;EAEI;EACA;EAEA;EACA;EAEA;EAEA;;AAEA;EAEI;EAEA;;;AAKZ;EAEI;EACA;EAEA;EAEA;;AAEA;EAEI;EACA;EAEA;EAEA;;AAEA;EAEI;EAEA;;AAGJ;EAEI;EACA;EAEA;EACA;EAEA;;AAEA;EAEI;;AAOZ;EAEI;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA;EAEA;;AAEA;EAEI;EAEA;;AAGJ;EAEI;EACA;;AAEA;EAEI;;;AAMhB;EAEI;EACA;EAEA;;AAEA;EAEI;EACA;EACA;;;AAIR;EAIQ;IAEI;;;EAMJ;IAEI;;EAGJ;IAEI","file":"styles.css"}

0
styles.sass
View File

168
styles.scss Normal file
View File

@@ -0,0 +1,168 @@
* {
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body {
background: rgb(238,49,114);
background: linear-gradient(135deg, rgba(238,49,114,1) 0%, rgba(16,121,209,1) 82%);
height: 100%;
font-family:Helvetica, sans-serif;
}
.header-container {
display: flex;
justify-content: center;
header {
width: 60%;
padding: 3vh 0px;
display: flex;
justify-content: center;
border-bottom: 2px solid #fff;
margin-bottom: 5vh;
h1 {
color: #fff;
user-select: none;
}
}
}
form {
display: flex;
flex-direction: column;
align-items: center;
padding: 0px 0px 5vh 0px;
.input-container {
display: flex;
flex-direction: column;
width: 20vw;
margin-bottom: 2vh;
label {
color: #fff;
margin-bottom: 0.5vh;
}
input {
border: none;
border-bottom: 1px solid #fff;
background: none;
outline: none;
color: #fff;
&::placeholder {
color: rgba(255, 255, 255, 0.685);
}
}
}
button {
width: 20vw;
height: 5vh;
box-sizing: border-box;
border: none;
border: 2px solid rgba(255, 255, 255, 0.699);
border-radius: 15px;
font-weight: bold;
color: #fff;
background: rgb(255, 255, 255, 0.1);
transition: 0.3s ease-in-out;
user-select: none;
&:hover {
background: rgb(255, 255, 255, 0.4);
transition: 0.3s ease-in-out;
}
&:disabled {
opacity: 20%;
transition: 0.3s ease-in-out;
&:hover {
background: rgb(255, 255, 255, 0.1);
}
}
}
}
.counter-element-container {
display: flex;
flex-direction: column;
align-items: center;
#counter-element {
color: #fff;
font-weight: bold;
font-size: 45pt;
}
}
@media (max-width: 768px) {
.header-container {
header {
width: 100%;
}
}
form {
.input-container {
width: 80vw;
}
button {
width: 80vw;
}
}
}