Skip to content

Commit 1a832a3

Browse files
Hdoc1509Hdoc1509
committed
feat(flip-the-coin): scaffold project
1 parent a7a291e commit 1a832a3

File tree

11 files changed

+203
-3
lines changed

11 files changed

+203
-3
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ There are some [packages](#packages) I created while completing them.
1919
- [x] [Random Quote](/vanilla/random-quote/)
2020
- [x] [QR Code Generator](/vanilla/qr-code-generator/)
2121
- [x] [Guess The Word Game](/vanilla/guess-the-word/)
22+
- [ ] [Flip The Coin](/vanilla/flip-the-coin/)
2223

2324
### Frontend Libraries
2425

‎pnpm-lock.yaml‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎vanilla/flip-the-coin/README.md‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<h1 align="center">Flip The Coin</h1>
2+
3+
<div align="center">
4+
<h3>
5+
<a href="https://hdoc1509.github.io/dev-challenges/flip-the-coin/">Solution</a>
6+
<span> | </span>
7+
<a href="https://devchallenges.io/challenge/flip-the-coin">Challenge</a>
8+
</h3>
9+
</div>
10+
11+
## Deploy status
12+
13+
[![Deploy challenges][deploy-status]][deploy-url]
14+
15+
## Overview
16+
17+
<!-- TODO: Update screenshot and its aspect ratio once project has completed -->
18+
19+
<p align="center">
20+
<img
21+
src="https://user-images.githubusercontent.com/16707738/92399059-5716eb00-f132-11ea-8b14-bcacdc8ec97b.png"
22+
alt="flip-the-coin screenshot"
23+
style="aspect-ratio: 16 / 9"
24+
/>
25+
</p>
26+
27+
Build a coin flipping game using HTML, CSS, and JavaScript to practice your web
28+
development skills. Test your knowledge of HTML and CSS syntax while
29+
incorporating JavaScript to create an interactive game.
30+
31+
## User Stories
32+
33+
- [ ] Create a web page that allows users to flip a virtual coin.
34+
- [ ] Display the result of the coin flip (heads or tails) on the page.
35+
- [ ] Add a button that triggers the coin flip when clicked.
36+
- [ ] Style the web page according to the design.
37+
- [ ] Use JavaScript to handle the logic of the coin flip and update the page
38+
accordingly.
39+
- [ ] Deploy the website to make it accessible for everyone.
40+
41+
### Built With
42+
43+
- [Vite](https://vitejs.dev/)
44+
- [BEM](https://getbem.com/) and [CUBE CSS](https://cube.fyi)
45+
- [fontsource](https://fontsource.org/) fonts:
46+
- _List of fonts used in the project_
47+
48+
### Extra Features
49+
50+
_WIP_
51+
52+
### What I learned
53+
54+
_WIP_
55+
56+
## How To Use
57+
58+
To clone and run this application, you'll need [Git](https://git-scm.com),
59+
[Node.js](https://nodejs.org/en/download/) and [pnpm](https://pnpm.io/installation)
60+
installed on your computer. From your command line:
61+
62+
```bash
63+
# clone this repository
64+
git clone https://github.com/Hdoc1509/dev-challenges
65+
66+
# install all required dependencies
67+
cd dev-challenges
68+
pnpm install --filter "@hdoc/dev-challenges" --filter "flip-the-coin"...
69+
70+
# run dev-server
71+
cd "vanilla/flip-the-coin"
72+
pnpm run dev --open
73+
```
74+
75+
[deploy-status]: https://github.com/Hdoc1509/dev-challenges/actions/workflows/deploy.yml/badge.svg
76+
[deploy-url]: https://github.com/Hdoc1509/dev-challenges/actions/workflows/deploy.yml
77+
78+
<!-- markdownlint-disable-file MD033 MD036 -->

‎vanilla/flip-the-coin/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Flip The Coin - DevChallenges</title>
8+
</head>
9+
<body>
10+
<header>
11+
<h1>Title</h1>
12+
</header>
13+
<main>
14+
Content
15+
</main>
16+
<footer>
17+
Footer
18+
</footer>
19+
<script type="module" src="/src/main.js"></script>
20+
</body>
21+
</html>

‎vanilla/flip-the-coin/jsconfig.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ES2020",
4+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
5+
"module": "EsNext",
6+
7+
"moduleResolution": "bundler",
8+
9+
"allowJs": true,
10+
"checkJs": true,
11+
"strict": true,
12+
"noUnusedLocals": true,
13+
"noUnusedParameters": true,
14+
15+
"paths": {
16+
"@/*": ["./src/*"]
17+
}
18+
}
19+
}

‎vanilla/flip-the-coin/package.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "flip-the-coin",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@lib/dom": "workspace:"
13+
},
14+
"devDependencies": {
15+
"vite": "catalog:",
16+
"vite-plugin-html-minifier": "workspace:"
17+
}
18+
}

‎vanilla/flip-the-coin/public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎vanilla/flip-the-coin/src/main.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import './styles/main.css'
2+
3+
console.log("app initialized")

‎vanilla/flip-the-coin/src/styles/global.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
:root {
2+
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3+
line-height: 1.5;
4+
font-weight: 400;
5+
6+
font-synthesis: none;
7+
text-rendering: optimizeLegibility;
8+
-webkit-font-smoothing: antialiased;
9+
-moz-osx-font-smoothing: grayscale;
10+
}
11+
12+
*,
13+
*::before,
14+
*::after {
15+
box-sizing: border-box;
16+
}
17+
18+
body {
19+
display: grid;
20+
grid-template-rows: auto 1fr auto;
21+
gap: 1rem;
22+
23+
margin: 0;
24+
min-width: 320px;
25+
max-width: 1280px;
26+
min-height: 100vh;
27+
min-height: 100svh;
28+
29+
background-color: #fff;
30+
padding: 2rem;
31+
32+
color: #000;
33+
}
34+
@media (max-width: 767px) {
35+
body {
36+
padding: 1rem;
37+
}
38+
}
39+
40+
h1 {
41+
font-size: 2rem;
42+
line-height: 1.1;
43+
}

‎vanilla/flip-the-coin/src/styles/main.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "global.css";

0 commit comments

Comments
 (0)