Jason
/
javascript-basic-projects
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Working on 1. Color Flipper

1-color-flipper
jason.zhu 2021-05-11 09:48:21 +10:00
parent e1e6fe1afe
commit 6bafaa3d5f
3 changed files with 30 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
1-color-flipper/app.js
View File

@ -1 +1,14 @@
const colors = ["green", "red", "rgba(133,122,200)", "#f15025"]; const colors = ["green", "red", "rgba(133,122,200)", "#f15025"];
const btn = document.getElementById('btn');
const color = document.querySelector(".color");
btn.addEventListener('click', function () {
const randomNumber = getRandomNumber();
document.body.style.backgroundColor = colors[randomNumber];
color.textContent = colors[randomNumber];
})
function getRandomNumber() {
return Math.floor(Math.random()*4);
}

17
1-color-flipper/index.html
View File

@ -9,7 +9,22 @@
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
</head> </head>
<body> <body>
<h1>color flipper</h1> <nav>
<div class="nav-center">
<h4>color flipper</h4>
<ul class="nav-links">
<li><a href="index.html">simple</a></li>
<li><a href="hex.html">hex</a></li>
</ul>
</div>
</nav>
<main>
<div class="container">
<h2>background color: <span class="color">#f1f5f8</span></h2>
<button class="btn btn-hero" id="btn">click me</button>
</div>
</main>
<!-- javascript --> <!-- javascript -->
<script src="app.js"></script> <script src="app.js"></script>
</body> </body>

2
README.md
View File

@ -1,3 +1,3 @@
# README # README
This is a practice repo following https://github.com/john-smilga/javascript-basic-projects This is a practice repo following https://github.com/john-smilga/javascript-basic-projects, which is part of [40 JavaScript Projects for Beginners – Easy Ideas to Get Started Coding JS](https://www.freecodecamp.org/news/javascript-projects-for-beginners/#how-to-create-a-color-flipper)