Skip to content

Commit 75bd797

Browse files
solygambassolygambas
committed
add speech text reader styling
1 parent d93ba10 commit 75bd797

File tree

5 files changed

+268
-3
lines changed

5 files changed

+268
-3
lines changed

‎65-hangman game/style.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -134,12 +134,12 @@ h3 {
134134
border-radius: 10px 10px 0 0;
135135
padding: 15px 20px;
136136
position: absolute;
137-
bottom: -50px;
137+
bottom: -60px;
138138
transition: transform 0.3s ease-in-out;
139139
}
140140

141141
.notification-container.show {
142-
transform: translateY(-50px);
142+
transform: translateY(-60px);
143143
}
144144

145145
.notification-container p {

‎71-speech text reader/index.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!-- Reference: https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis -->
2+
3+
<!DOCTYPE html>
4+
<html lang="en">
5+
<head>
6+
<meta charset="UTF-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<link
9+
rel="stylesheet"
10+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
11+
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
12+
crossorigin="anonymous"
13+
/>
14+
<link rel="stylesheet" href="style.css" />
15+
<title>Speech Text Reader</title>
16+
</head>
17+
<body>
18+
<div class="container">
19+
<h1>Speech Text Reader</h1>
20+
<button id="toggle" class="btn btn-toggle">Toggle Text Box</button>
21+
</div>
22+
<div id="text-box" class="text-box">
23+
<div id="close" class="close"><i class="fas fa-times"></i></div>
24+
<h3>Choose Voice</h3>
25+
<select id="voices"></select>
26+
<textarea id="text" placeholder="Enter text to read..."></textarea>
27+
<button class="btn" id="read">Read Text</button>
28+
</div>
29+
<main></main>
30+
<script src="script.js"></script>
31+
</body>
32+
</html>

‎71-speech text reader/script.js

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
const main = document.querySelector("main");
2+
const voicesSelect = document.getElementById("voices");
3+
const textarea = document.getElementById("text");
4+
const readButton = document.getElementById("read");
5+
const toggleButton = document.getElementById("toggle");
6+
const closeButton = document.getElementById("close");
7+
8+
const data = [
9+
{
10+
image: "drink",
11+
text: "I'm Thirsty",
12+
},
13+
{
14+
image: "food",
15+
text: "I'm Hungry",
16+
},
17+
{
18+
image: "tired",
19+
text: "I'm Tired",
20+
},
21+
{
22+
image: "hurt",
23+
text: "I'm Hurt",
24+
},
25+
{
26+
image: "happy",
27+
text: "I'm Happy",
28+
},
29+
{
30+
image: "angry",
31+
text: "I'm Angry",
32+
},
33+
{
34+
image: "sad",
35+
text: "I'm Sad",
36+
},
37+
{
38+
image: "scared",
39+
text: "I'm Scared",
40+
},
41+
{
42+
image: "outside",
43+
text: "I Want To Go Outside",
44+
},
45+
{
46+
image: "home",
47+
text: "I Want To Go Home",
48+
},
49+
{
50+
image: "school",
51+
text: "I Want To Go To School",
52+
},
53+
{
54+
image: "grandma",
55+
text: "I Want To Go To Grandmas",
56+
},
57+
];
58+
59+
function createBox(item) {
60+
const box = document.createElement("div");
61+
const { image, text } = item;
62+
box.classList.add("box");
63+
box.innerHTML = `
64+
<img src='https://github.com/bradtraversy/vanillawebprojects/blob/master/speech-text-reader/img/${image}.jpg?raw=true' alt="${text}"/>
65+
<p class="info">${text}</p>
66+
`;
67+
main.appendChild(box);
68+
}
69+
70+
data.forEach(createBox);

‎71-speech text reader/style.css

+162
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300;700&display=swap");
2+
3+
:root {
4+
--main-color: #6B6FA9;
5+
--secondary-color: #272156;
6+
--light-color: #F4F4FB;
7+
--border-color: #E2DDEA;
8+
--overlay-color: rgba(0,0,0,0.2);
9+
--border-radius: 1.5rem;
10+
}
11+
12+
* {
13+
box-sizing: border-box;
14+
}
15+
16+
body {
17+
background-color: var(--light-color);
18+
font-family: "Open Sans Condensed", sans-serif;
19+
min-height: 100vh;
20+
margin: 0;
21+
}
22+
23+
h1 {
24+
text-align: center;
25+
}
26+
27+
.container {
28+
margin: auto;
29+
padding: 20px;
30+
}
31+
32+
.btn {
33+
background-color: var(--main-color);
34+
color: var(--light-color);
35+
border: 0;
36+
border-radius: var(--border-radius);
37+
font-size: 1rem;
38+
font-family: inherit;
39+
font-weight: bold;
40+
padding: 0.5rem 1rem;
41+
cursor: pointer;
42+
}
43+
44+
.btn:active {
45+
transform: scale(0.98);
46+
}
47+
48+
.btn:focus, select:focus {
49+
outline: none;
50+
}
51+
52+
.btn-toggle {
53+
display: block;
54+
margin: auto;
55+
margin-bottom: 20px;
56+
}
57+
58+
.text-box {
59+
background-color: var(--secondary-color);
60+
color: var(--light-color);
61+
width: 500px;
62+
max-width: 90vw;
63+
position: absolute;
64+
top: 30%;
65+
left: 50%;
66+
border-radius: var(--border-radius);
67+
padding: 1.25rem;
68+
transform: translate(-50%, -800px);
69+
transition: all 1s ease-in-out;
70+
}
71+
72+
.text-box select {
73+
background-color: var(--main-color);
74+
color: var(--light-color);
75+
border-radius: var(--border-radius);
76+
border: 0;
77+
font-size: 0.75rem;
78+
height: 30px;
79+
width: 100%;
80+
}
81+
82+
.text-box textarea {
83+
border: 1px #dadada solid;
84+
border-radius: var(--border-radius);
85+
font-size: 1rem;
86+
padding: 0.5rem;
87+
margin: 1rem 0;
88+
height: 150px;
89+
width: 100%;
90+
}
91+
92+
.text-box .btn {
93+
width: 100%;
94+
}
95+
96+
.text-box .close {
97+
float: right;
98+
text-align: right;
99+
cursor: pointer;
100+
}
101+
102+
main {
103+
display: grid;
104+
grid-template-columns: 1fr;
105+
gap: 1rem;
106+
max-width: 90vw;
107+
margin: 0 auto;
108+
padding-bottom: 2rem;
109+
}
110+
111+
.box {
112+
box-shadow: 0 2px 10px var(--overlay-color);
113+
border-radius: var(--border-radius);
114+
display: flex;
115+
flex-direction: column;
116+
overflow: hidden;
117+
cursor: pointer;
118+
transition: box-shadow 0.2s ease-out;
119+
}
120+
121+
.box.active {
122+
box-shadow: 0 0 10px 5px var(--main-color);
123+
}
124+
125+
.box img {
126+
width: 100%;
127+
height: 200px;
128+
object-fit: cover;
129+
}
130+
131+
.box .info {
132+
background-color: var(--main-color);
133+
color: var(--light-color);
134+
font-size: 1.125rem;
135+
letter-spacing: 1px;
136+
text-transform: uppercase;
137+
text-align: center;
138+
margin: 0;
139+
padding: 10px;
140+
height: 100%;
141+
}
142+
143+
@media (min-width: 576px) {
144+
main {
145+
grid-template-columns: repeat(2, 1fr);
146+
}
147+
}
148+
149+
@media (min-width: 768px) {
150+
main {
151+
grid-template-columns: repeat(3, 1fr);
152+
}
153+
}
154+
155+
@media (min-width: 1200px) {
156+
main {
157+
grid-template-columns: repeat(4, 1fr);
158+
}
159+
}
160+
161+
162+

‎README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,9 @@
7676
| 68 | [Music Player](https://github.com/solygambas/html-css-fifty-projects/tree/master/68-music%20player) | [Live Demo](https://codepen.io/solygambas/full/LYbaZNG) |
7777
| 69 | [Infinite Scroll Posts](https://github.com/solygambas/html-css-fifty-projects/tree/master/69-infinite%20scroll%20posts) | [Live Demo](https://codepen.io/solygambas/full/qBqvyEB) |
7878
| 70 | [Typing Game](https://github.com/solygambas/html-css-fifty-projects/tree/master/70-typing%20game) | [Live Demo](https://codepen.io/solygambas/full/wvoOQvq) |
79+
| 71 | [Speech Text Reader](https://github.com/solygambas/html-css-fifty-projects/tree/master/71-speech%20text%20reader) | [Live Demo](#) |
7980

80-
These projects are mostly based on 2 courses by Brad Traversy (2020):
81+
This repository is mostly based on 2 courses by Brad Traversy (2020):
8182

8283
- [50 Projects In 50 Days - HTML, CSS & JavaScript](https://www.udemy.com/course/50-projects-50-days/)
8384
- [20 Web Projects With Vanilla JavaScript](https://www.udemy.com/course/web-projects-with-vanilla-javascript/)

0 commit comments

Comments
 (0)