EduardPrigoana/prigoana.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

test!

Browse source
This commit is contained in:
EduardSkibidiEdger 2024-10-15 19:37:19 +03:00
parent cf92397966
commit daa71db374
6 changed files with 183 additions and 265 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

113
CS/L6.html
View file

@ -5,50 +5,101 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lesson 6</title> <title>Lesson 6</title>
<style> <style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body { body {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; height: 100vh;
margin: 0; font-family: 'Arial', sans-serif;
font-family: Arial, sans-serif; background-color: #080709;
color: #e0ceed;
flex-direction: column; flex-direction: column;
} }
.container { .container {
text-align: center; text-align: center;
background-color: #151217;
border-radius: 10px;
padding: 40px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
max-width: 400px;
width: 100%;
}
h2 {
font-size: 24px;
color: #b657ff;
margin-bottom: 20px;
} }
.input-group { .input-group {
margin: 10px; margin: 20px 0;
} }
input { input {
padding: 10px; padding: 12px;
width: 200px; width: 100%;
font-size: 16px; font-size: 16px;
background-color: #211d26;
color: #e0ceed;
border: 1px solid #3b3442;
border-radius: 5px;
}
input:focus {
border-color: #b657ff;
outline: none;
} }
button { button {
padding: 10px 20px; padding: 12px 20px;
font-size: 16px; font-size: 16px;
background-color: #b657ff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease;
} }
button:hover {
.result { background-color: #a29dfa;
margin-top: 20px;
} }
.result, .guess-result {
.guess-result {
margin-top: 20px; margin-top: 20px;
font-size: 18px; font-size: 18px;
font-weight: bold;
}
hr {
margin: 40px 0;
border: none;
border-top: 2px solid #3b3442;
}
.terminal {
font-family: monospace;
padding: 20px;
}
.navbar {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
margin: 0;
}
.navbar a {
text-decoration: none;
color: #ffffff;
}
.navbar a:hover {
background-color: #a29dfa;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="terminal">
<ul class="navbar">
<li><a href="./">back</a></li>
</ul>
</div>
<div class="container"> <div class="container">
<!-- Calculator Section -->
<h2>Calculator: Add, Divide by 2, and Check Even/Odd</h2> <h2>Calculator: Add, Divide by 2, and Check Even/Odd</h2>
<div class="input-group"> <div class="input-group">
<input type="number" id="num1" placeholder="Enter first number"> <input type="number" id="num1" placeholder="Enter first number">
@ -60,10 +111,7 @@
<button onclick="calculate()">Calculate</button> <button onclick="calculate()">Calculate</button>
</div> </div>
<div id="calc-result" class="result"></div> <div id="calc-result" class="result"></div>
<hr> <hr>
<!-- Guessing Game Section -->
<h2>Number Guessing Game</h2> <h2>Number Guessing Game</h2>
<div class="input-group"> <div class="input-group">
<input type="number" id="guess" placeholder="Guess the number (1-10)"> <input type="number" id="guess" placeholder="Guess the number (1-10)">
@ -73,48 +121,31 @@
</div> </div>
<div id="guess-result" class="guess-result"></div> <div id="guess-result" class="guess-result"></div>
</div> </div>
<script> <script>
// Function for Calculator
function calculate() { function calculate() {
const num1 = parseFloat(document.getElementById('num1').value); const num1 = parseFloat(document.getElementById('num1').value);
const num2 = parseFloat(document.getElementById('num2').value); const num2 = parseFloat(document.getElementById('num2').value);
if (isNaN(num1) || isNaN(num2)) { if (isNaN(num1) || isNaN(num2)) {
alert("Please enter valid numbers."); alert("Please enter valid numbers.");
return; return;
} }
const result = (num1 + num2) / 2;
const sum = num1 + num2;
const result = sum / 2;
const isEven = result % 2 === 0 ? "even" : "odd"; const isEven = result % 2 === 0 ? "even" : "odd";
document.getElementById('calc-result').innerHTML = `The result is ${result}, which is <strong>${isEven}</strong>.`;
document.getElementById('calc-result').innerHTML =
`The result is ${result}, which is <strong>${isEven}</strong>.`;
} }
// Function for Number Guessing Game
function guessNumber() { function guessNumber() {
const userGuess = parseInt(document.getElementById('guess').value); const userGuess = parseInt(document.getElementById('guess').value);
const randomNumber = Math.floor(Math.random() * 10) + 1; const randomNumber = Math.floor(Math.random() * 10) + 1;
if (isNaN(userGuess) || userGuess < 1 || userGuess > 10) { if (isNaN(userGuess) || userGuess < 1 || userGuess > 10) {
alert("Please guess a number between 1 and 10."); alert("Please guess a number between 1 and 10.");
return; return;
} }
if (userGuess === randomNumber) { if (userGuess === randomNumber) {
document.getElementById('guess-result').innerHTML = document.getElementById('guess-result').innerHTML = `<strong>Congratulations!</strong> You guessed the number ${randomNumber}.`;
`<strong>Congratulations!</strong> You guessed the number ${randomNumber}.`;
} else if (userGuess > randomNumber) {
document.getElementById('guess-result').innerHTML =
`Too high! The number was ${randomNumber}. Try again.`;
} else { } else {
document.getElementById('guess-result').innerHTML = document.getElementById('guess-result').innerHTML = userGuess > randomNumber ? `Too high! The number was ${randomNumber}. Try again.` : `Too low! The number was ${randomNumber}. Try again.`;
`Too low! The number was ${randomNumber}. Try again.`;
} }
} }
</script> </script>
</body> </body>
</html> </html>

32
CS/ProblemSolvingProcess/content.md
View file

@ -0,0 +1,32 @@
# Problem Solving Process
## 1. Define
**Definition:** Clearly understand and define the problem. Identify the root cause and gather all the necessary information.
**Example:**
The machine on the assembly line keeps stopping randomly.
**Define:**
Understand that the issue is the machine’s unexpected stops. Gather data on when and how it happens.
## 2. Prepare
**Definition:** Plan potential solutions. Brainstorm ideas, gather resources, and consider possible approaches.
**Example:**
Brainstorm possible causes like faulty wiring, overheating, or software glitches. Plan to inspect the machine's components and test each hypothesis.
## 3. Try
**Definition:** Implement the solution. Test the planned solution in a controlled environment or apply it step by step.
**Example:**
Test by replacing a faulty component or adjusting software settings. Monitor if the machine stops unexpectedly after the changes.
## 4. Reflect
**Definition:** Assess the outcome of the solution. Did it work? What could be improved? Reflect on how effective the solution was.
**Example:**
After a week of testing, determine whether the machine continues to operate smoothly. If it still malfunctions, revisit the Prepare phase for further investigation.

126
CS/ProblemSolvingProcess/index.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<link rel="icon" type="image/x-icon" href="/favicon.png"> <link rel="icon" type="image/x-icon" href="../../favicon.png">
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Problem Solving Process Poster</title> <title>Problem Solving Process Poster</title>
@ -32,9 +32,16 @@
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
border-radius: 10px; border-radius: 10px;
padding: 2em; padding: 2em;
opacity: 0;
transition: opacity 0.5s ease-in-out;
} }
h1 { .poster.visible {
opacity: 1;
}
/* Styling for dynamically generated content */
.poster h1 {
text-align: center; text-align: center;
color: #b657ff; /* Lilac color for header */ color: #b657ff; /* Lilac color for header */
margin-bottom: 1.5em; margin-bottom: 1.5em;
@ -42,7 +49,7 @@
font-weight: bold; font-weight: bold;
} }
h2 { .poster h2 {
color: #a29dfa; /* Softer lilac color */ color: #a29dfa; /* Softer lilac color */
border-bottom: 2px solid #b657ff; /* Lilac border */ border-bottom: 2px solid #b657ff; /* Lilac border */
padding-bottom: 0.5em; padding-bottom: 0.5em;
@ -50,17 +57,13 @@
font-size: 1.5em; font-size: 1.5em;
} }
p { .poster p {
font-size: 1em; font-size: 1em;
line-height: 1.6; line-height: 1.6;
margin-top: 0.5em; margin-top: 0.5em;
color: #e0ceed; /* Light text color */ color: #e0ceed; /* Light text color */
} }
.section {
margin-bottom: 1.5em;
}
.example { .example {
background-color: #211d26; /* Dark lilac tone for example box */ background-color: #211d26; /* Dark lilac tone for example box */
padding: 1em; padding: 1em;
@ -75,29 +78,29 @@
/* Responsive Typography */ /* Responsive Typography */
@media (max-width: 768px) { @media (max-width: 768px) {
h1 { .poster h1 {
font-size: 1.8em; font-size: 1.8em;
} }
h2 { .poster h2 {
font-size: 1.3em; font-size: 1.3em;
} }
p { .poster p {
font-size: 0.95em; font-size: 0.95em;
} }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
h1 { .poster h1 {
font-size: 1.5em; font-size: 1.5em;
} }
h2 { .poster h2 {
font-size: 1.2em; font-size: 1.2em;
} }
p { .poster p {
font-size: 0.9em; font-size: 0.9em;
} }
@ -106,43 +109,68 @@
} }
} }
</style> </style>
<!-- Include marked.js from CDN -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head> </head>
<body> <body>
<div class="poster"> <div class="poster" id="poster-content">
<h1>Problem Solving Process</h1> <!-- Markdown content will be injected here -->
<div class="section">
<h2>1. Define</h2>
<p><strong>Definition:</strong> Clearly understand and define the problem. Identify the root cause and gather all the necessary information.</p>
<div class="example">
<p><strong>Example:</strong> The machine on the assembly line keeps stopping randomly.</p>
<p><strong>Define:</strong> Understand that the issue is the machine’s unexpected stops. Gather data on when and how it happens.</p>
</div>
</div>
<div class="section">
<h2>2. Prepare</h2>
<p><strong>Definition:</strong> Plan potential solutions. Brainstorm ideas, gather resources, and consider possible approaches.</p>
<div class="example">
<p><strong>Example:</strong> Brainstorm possible causes like faulty wiring, overheating, or software glitches. Plan to inspect the machine's components and test each hypothesis.</p>
</div>
</div>
<div class="section">
<h2>3. Try</h2>
<p><strong>Definition:</strong> Implement the solution. Test the planned solution in a controlled environment or apply it step by step.</p>
<div class="example">
<p><strong>Example:</strong> Test by replacing a faulty component or adjusting software settings. Monitor if the machine stops unexpectedly after the changes.</p>
</div>
</div>
<div class="section">
<h2>4. Reflect</h2>
<p><strong>Definition:</strong> Assess the outcome of the solution. Did it work? What could be improved? Reflect on how effective the solution was.</p>
<div class="example">
<p><strong>Example:</strong> After a week of testing, determine whether the machine continues to operate smoothly. If it still malfunctions, revisit the Prepare phase for further investigation.</p>
</div>
</div>
</div> </div>
<script>
// Function to fetch and render Markdown content
async function loadMarkdown() {
try {
const response = await fetch('./content.md');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const markdown = await response.text();
const htmlContent = marked.parse(markdown);
document.getElementById('poster-content').innerHTML = htmlContent;
// After inserting the HTML, wrap example sections
wrapExamples();
// Make the poster visible
document.querySelector('.poster').classList.add('visible');
} catch (error) {
console.error('Error fetching or parsing Markdown:', error);
document.getElementById('poster-content').innerHTML = '<p>Failed to load content.</p>';
}
}
// Function to wrap example sections in a div with class 'example'
function wrapExamples() {
const poster = document.getElementById('poster-content');
const paragraphs = poster.querySelectorAll('p');
paragraphs.forEach((p, index) => {
if (p.textContent.startsWith('Example:')) {
// Create a new div with class 'example'
const exampleDiv = document.createElement('div');
exampleDiv.className = 'example';
// Move the 'Example:' paragraph into the div
exampleDiv.appendChild(p.cloneNode(true));
// Check if the next paragraph starts with 'Define:'
const nextP = paragraphs[index + 1];
if (nextP && nextP.textContent.startsWith('Define:')) {
exampleDiv.appendChild(nextP.cloneNode(true));
// Remove the original paragraphs
nextP.remove();
}
// Replace the original 'Example:' paragraph with the div
p.replaceWith(exampleDiv);
}
});
}
// Load the Markdown content when the page loads
window.addEventListener('DOMContentLoaded', loadMarkdown);
</script>
</body> </body>
</html> </html>

175
CS/ProblemSolvingProcess/test.html
View file

@ -1,175 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/x-icon" href="/favicon.png">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Problem Solving Process Poster</title>
<style>
/* Reset some default styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #080709; /* Dark background for body */
color: #e0ceed; /* Light text color */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.poster {
width: 100%;
max-width: 800px; /* Limits width on larger screens */
background-color: #151217; /* Dark background for poster */
color: #e0ceed; /* Light text color */
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
border-radius: 10px;
padding: 2em;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.poster.visible {
opacity: 1;
}
/* Styling for dynamically generated content */
.poster h1 {
text-align: center;
color: #b657ff; /* Lilac color for header */
margin-bottom: 1.5em;
font-size: 2em;
font-weight: bold;
}
.poster h2 {
color: #a29dfa; /* Softer lilac color */
border-bottom: 2px solid #b657ff; /* Lilac border */
padding-bottom: 0.5em;
margin-top: 1.5em;
font-size: 1.5em;
}
.poster p {
font-size: 1em;
line-height: 1.6;
margin-top: 0.5em;
color: #e0ceed; /* Light text color */
}
.example {
background-color: #211d26; /* Dark lilac tone for example box */
padding: 1em;
border-radius: 8px;
margin-top: 1em;
border: 1px solid #3b3442; /* Darker purple border */
}
.example p {
margin: 0.5em 0;
}
/* Responsive Typography */
@media (max-width: 768px) {
.poster h1 {
font-size: 1.8em;
}
.poster h2 {
font-size: 1.3em;
}
.poster p {
font-size: 0.95em;
}
}
@media (max-width: 480px) {
.poster h1 {
font-size: 1.5em;
}
.poster h2 {
font-size: 1.2em;
}
.poster p {
font-size: 0.9em;
}
.poster {
padding: 1.5em;
}
}
</style>
<!-- Include marked.js from CDN -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
<div class="poster" id="poster-content">
<!-- Markdown content will be injected here -->
</div>
<script>
// Function to fetch and render Markdown content
async function loadMarkdown() {
try {
const response = await fetch('content.md');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const markdown = await response.text();
const htmlContent = marked.parse(markdown);
document.getElementById('poster-content').innerHTML = htmlContent;
// After inserting the HTML, wrap example sections
wrapExamples();
// Make the poster visible
document.querySelector('.poster').classList.add('visible');
} catch (error) {
console.error('Error fetching or parsing Markdown:', error);
document.getElementById('poster-content').innerHTML = '<p>Failed to load content.</p>';
}
}
// Function to wrap example sections in a div with class 'example'
function wrapExamples() {
const poster = document.getElementById('poster-content');
const paragraphs = poster.querySelectorAll('p');
paragraphs.forEach((p, index) => {
if (p.textContent.startsWith('Example:')) {
// Create a new div with class 'example'
const exampleDiv = document.createElement('div');
exampleDiv.className = 'example';
// Move the 'Example:' paragraph into the div
exampleDiv.appendChild(p.cloneNode(true));
// Check if the next paragraph starts with 'Define:'
const nextP = paragraphs[index + 1];
if (nextP && nextP.textContent.startsWith('Define:')) {
exampleDiv.appendChild(nextP.cloneNode(true));
// Remove the original paragraphs
nextP.remove();
}
// Replace the original 'Example:' paragraph with the div
p.replaceWith(exampleDiv);
}
});
}
// Load the Markdown content when the page loads
window.addEventListener('DOMContentLoaded', loadMarkdown);
</script>
</body>
</html>

1
CS/index.html
View file

@ -51,6 +51,7 @@
<ul> <ul>
<li><p><span class="command"><a href="/projects">../</a></span></p></li> <li><p><span class="command"><a href="/projects">../</a></span></p></li>
<li><span class="space"><span class="space"></span><span class="command"><a href="./ProblemSolvingProcess/">Problem Solving Process</a></span></li> <li><span class="space"><span class="space"></span><span class="command"><a href="./ProblemSolvingProcess/">Problem Solving Process</a></span></li>
<li><span class="space"><span class="space"></span><span class="command"><a href="./L6">L6</a></span></li>
</ul> </ul>
</div> </div>
</body> </body>

1
projects.html
View file

@ -52,6 +52,7 @@
<li><p><span class="command"><a href="./">./</a></span></p></li> <li><p><span class="command"><a href="./">./</a></span></p></li>
<li><span class="space"></span><span class="command"><a href="./CS/">CS/</a></span></li> <li><span class="space"></span><span class="command"><a href="./CS/">CS/</a></span></li>
<li><span class="space"><span class="space"></span><span class="command"><a href="./CS/ProblemSolvingProcess/">Problem Solving Process</a></span></li> <li><span class="space"><span class="space"></span><span class="command"><a href="./CS/ProblemSolvingProcess/">Problem Solving Process</a></span></li>
<li><span class="space"><span class="space"></span><span class="command"><a href="./CS/L6.html">L6</a></span></li>
</ul> </ul>
</div> </div>
</body> </body>