Tanmay Srivastava
12 months ago
parent
2f458c2267
commit
6b4769e15b
@ -1,11 +1,17 @@
|
|||||||
# Reading the Docs
|
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
|
|
||||||
There are many tools that a web developer may need that are on the [MDN documentation for client-side tooling](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Select 3 tools not covered in the lesson, explain why a web developer would use it, and search for a tool that falls under this category and share its documentation. Do not use the same tool example on MDN docs.
|
There are many tools that a web developer may need that are listed on the [MDN documentation for client-side tooling](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Select **three tools** that are **not covered in this lesson** (excluding [list specific tools or refer to lesson content]), explain **why** a web developer would use each tool, and find a tool that fits each category. For each, share a link to its official documentation (not the example used on MDN).
|
||||||
|
|
||||||
|
**Format:**
|
||||||
|
- Tool name
|
||||||
|
- Why a web developer would use it (2-3 sentences)
|
||||||
|
- Link to documentation
|
||||||
|
|
||||||
|
**Length:**
|
||||||
|
- Each explanation should be 2-3 sentences.
|
||||||
|
|
||||||
## Rubric
|
## Rubric
|
||||||
|
|
||||||
Exemplary | Adequate | Needs Improvement
|
Exemplary | Adequate | Needs Improvement
|
||||||
--- | --- | -- |
|
--- | --- | -- |
|
||||||
|Explained why web developer would use tool| Explained how, but not why developer would use tool| Did not mention how or why a developer would use tool |
|
Explained why web developer would use tool | Explained how, but not why developer would use tool | Did not mention how or why a developer would use tool |
|
||||||
@ -1,11 +1,27 @@
|
|||||||
# CSS Refactoring
|
# CSS Refactoring Assignment
|
||||||
|
|
||||||
|
## Objective
|
||||||
|
|
||||||
|
Refactor the terrarium project to use **Flexbox** or **CSS Grid** for layout. Update the HTML and CSS as needed to achieve a modern, responsive design. You do not need to implement draggable elements—focus on layout and styling only.
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
|
|
||||||
Restyle the terrarium using either Flexbox or CSS Grid, and take screenshots to show that you have tested it on several browsers. You might need to change the markup so create a new version of the app with the art in place for your refactor. Don't worry about making the elements draggable; only refactor the HTML and CSS for now.
|
1. **Create a new version** of the terrarium app. Update the markup and CSS to use Flexbox or CSS Grid for layout.
|
||||||
|
2. **Ensure the art and elements are in place** as in the original version.
|
||||||
|
3. **Test your design** in at least two different browsers (e.g., Chrome, Firefox, Edge).
|
||||||
|
4. **Take screenshots** of your terrarium in each browser to demonstrate cross-browser compatibility.
|
||||||
|
5. **Submit** your updated code and screenshots.
|
||||||
|
|
||||||
## Rubric
|
## Rubric
|
||||||
|
|
||||||
| Criteria | Exemplary | Adequate | Needs Improvement |
|
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||||
| -------- | ----------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
|
|------------|--------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
|
||||||
| | Present a completely restyled terrarium using Flexbox or CSS Grid | Restyle a few of the elements | Fail to restyle the terrarium at all |
|
| Layout | Fully refactored using Flexbox or CSS Grid; visually appealing and responsive | Some elements refactored; partial use of Flexbox or Grid | Little or no use of Flexbox or Grid; layout unchanged |
|
||||||
|
| Cross-Browser | Screenshots provided for multiple browsers; consistent appearance | Screenshots for one browser; minor inconsistencies | No screenshots or major inconsistencies |
|
||||||
|
| Code Quality | Clean, well-organized HTML/CSS; clear comments | Some organization; few comments | Disorganized code; lacks comments |
|
||||||
|
|
||||||
|
## Tips
|
||||||
|
|
||||||
|
- Review [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) and [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) guides.
|
||||||
|
- Use browser developer tools to test responsiveness.
|
||||||
|
- Comment your code for clarity.
|
||||||
@ -1,94 +1,94 @@
|
|||||||
|
// Typing Game - Modern ES6+ Version
|
||||||
|
|
||||||
|
// Quotes pool
|
||||||
const quotes = [
|
const quotes = [
|
||||||
'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
|
"When you have eliminated the impossible, whatever remains, however improbable, must be the truth.",
|
||||||
'There is nothing more deceptive than an obvious fact.',
|
"There is nothing more deceptive than an obvious fact.",
|
||||||
'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.',
|
"I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.",
|
||||||
'I never make exceptions. An exception disproves the rule.',
|
"I never make exceptions. An exception disproves the rule.",
|
||||||
'What one man can invent another can discover.',
|
"What one man can invent another can discover.",
|
||||||
'Nothing clears up a case so much as stating it to another person.',
|
"Nothing clears up a case so much as stating it to another person.",
|
||||||
'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
|
"Education never ends, Watson. It is a series of lessons, with the greatest for the last."
|
||||||
];
|
];
|
||||||
|
|
||||||
// array for storing the words of the current challenge
|
// State
|
||||||
let words = [];
|
let words = [];
|
||||||
// stores the index of the word the player is currently typing
|
|
||||||
let wordIndex = 0;
|
let wordIndex = 0;
|
||||||
// default value for startTime (will be set on start)
|
let startTime = 0;
|
||||||
let startTime = Date.now();
|
|
||||||
|
|
||||||
// grab UI items
|
// UI Elements
|
||||||
const quoteElement = document.getElementById('quote');
|
const quoteElement = document.querySelector("#quote");
|
||||||
const messageElement = document.getElementById('message')
|
const messageElement = document.querySelector("#message");
|
||||||
const typedValueElement = document.getElementById('typed-value');
|
const typedValueElement = document.querySelector("#typed-value");
|
||||||
|
const startButton = document.querySelector("#start");
|
||||||
|
|
||||||
document.getElementById('start').addEventListener('click', function () {
|
// Messages system
|
||||||
// get a quote
|
const messages = {
|
||||||
const quoteIndex = Math.floor(Math.random() * quotes.length);
|
success: (seconds) => `🎉 Congratulations! You finished in ${seconds.toFixed(2)} seconds.`,
|
||||||
const quote = quotes[quoteIndex];
|
error: "⚠️ Oops! There's a mistake.",
|
||||||
// Put the quote into an array of words
|
start: "⌨️ Start typing to begin the game."
|
||||||
words = quote.split(' ');
|
};
|
||||||
// reset the word index for tracking
|
|
||||||
wordIndex = 0;
|
|
||||||
|
|
||||||
// UI updates
|
// Utility: pick random quote
|
||||||
// Create an array of span elements so we can set a class
|
const getRandomQuote = () => quotes[Math.floor(Math.random() * quotes.length)];
|
||||||
const spanWords = words.map(function (word) { return `<span>${word} </span>` });
|
|
||||||
// Convert into string and set as innerHTML on quote display
|
// Utility: render quote as spans
|
||||||
quoteElement.innerHTML = spanWords.join('');
|
const renderQuote = (quote) => {
|
||||||
// Highlight the first word
|
quoteElement.innerHTML = quote
|
||||||
quoteElement.childNodes[0].className = 'highlight';
|
.split(" ")
|
||||||
// Clear any prior messages
|
.map((word, i) => `<span ${i === 0 ? 'class="highlight"' : ""}>${word}</span>`)
|
||||||
messageElement.innerText = '';
|
.join(" ");
|
||||||
|
};
|
||||||
|
|
||||||
|
// Utility: highlight current word
|
||||||
|
const highlightWord = (index) => {
|
||||||
|
[...quoteElement.children].forEach((el, i) => {
|
||||||
|
el.classList.toggle("highlight", i === index);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
// Setup the textbox
|
// Game start
|
||||||
// Clear the textbox
|
const startGame = () => {
|
||||||
typedValueElement.value = '';
|
const quote = getRandomQuote();
|
||||||
// set focus
|
words = quote.split(" ");
|
||||||
|
wordIndex = 0;
|
||||||
|
renderQuote(quote);
|
||||||
|
|
||||||
|
messageElement.textContent = messages.start;
|
||||||
|
typedValueElement.value = "";
|
||||||
typedValueElement.focus();
|
typedValueElement.focus();
|
||||||
// set the event handler
|
|
||||||
|
|
||||||
// Start the timer
|
startTime = Date.now();
|
||||||
startTime = new Date().getTime();
|
};
|
||||||
});
|
|
||||||
|
|
||||||
typedValueElement.addEventListener('input', (e) => {
|
// Typing logic
|
||||||
// Get the current word
|
const handleTyping = () => {
|
||||||
const currentWord = words[wordIndex];
|
const currentWord = words[wordIndex];
|
||||||
// get the current value
|
|
||||||
const typedValue = typedValueElement.value;
|
const typedValue = typedValueElement.value;
|
||||||
|
|
||||||
if (typedValue === currentWord && wordIndex === words.length - 1) {
|
if (typedValue === currentWord && wordIndex === words.length - 1) {
|
||||||
// end of quote
|
// Game finished
|
||||||
// Display success
|
const elapsedTime = (Date.now() - startTime) / 1000;
|
||||||
const elapsedTime = new Date().getTime() - startTime;
|
messageElement.textContent = messages.success(elapsedTime);
|
||||||
const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`;
|
typedValueElement.disabled = true;
|
||||||
messageElement.innerText = message;
|
} else if (typedValue.endsWith(" ") && typedValue.trim() === currentWord) {
|
||||||
} else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
|
// Word completed
|
||||||
// end of word
|
typedValueElement.value = "";
|
||||||
// clear the typedValueElement for the new word
|
|
||||||
typedValueElement.value = '';
|
|
||||||
// move to the next word
|
|
||||||
wordIndex++;
|
wordIndex++;
|
||||||
// reset the class name for all elements in quote
|
highlightWord(wordIndex);
|
||||||
for (const wordElement of quoteElement.childNodes) {
|
|
||||||
wordElement.className = '';
|
|
||||||
}
|
|
||||||
// highlight the new word
|
|
||||||
quoteElement.childNodes[wordIndex].className = 'highlight';
|
|
||||||
} else if (currentWord.startsWith(typedValue)) {
|
} else if (currentWord.startsWith(typedValue)) {
|
||||||
// currently correct
|
// Correct so far
|
||||||
// highlight the next word
|
typedValueElement.classList.remove("error");
|
||||||
typedValueElement.className = '';
|
|
||||||
} else {
|
} else {
|
||||||
// error state
|
// Error
|
||||||
typedValueElement.className = 'error';
|
typedValueElement.classList.add("error");
|
||||||
|
messageElement.textContent = messages.error;
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
// Add this at the end of the file
|
|
||||||
const messages = {
|
|
||||||
success: "CONGRATULATIONS! You finished in {seconds} seconds.",
|
|
||||||
error: "Oops! There's a mistake.",
|
|
||||||
start: "Start typing to begin the game."
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default messages;
|
// Event Listeners
|
||||||
|
startButton.addEventListener("click", startGame);
|
||||||
|
typedValueElement.addEventListener("input", handleTyping);
|
||||||
|
|
||||||
|
// Default state
|
||||||
|
messageElement.textContent = "👉 Click Start to begin!";
|
||||||
|
|||||||
@ -1,30 +1,56 @@
|
|||||||
# api
|
|
||||||
|
|
||||||
from flask import Flask, request, jsonify
|
from flask import Flask, request, jsonify
|
||||||
from llm import call_llm
|
from llm import call_llm
|
||||||
from flask_cors import CORS
|
from flask_cors import CORS
|
||||||
|
import logging
|
||||||
|
|
||||||
app = Flask(__name__)
|
app = Flask(__name__)
|
||||||
CORS(app) # * example.com
|
|
||||||
|
# Configure CORS (allow all origins for development; restrict in production)
|
||||||
|
CORS(app, resources={r"/*": {"origins": "*"}})
|
||||||
|
|
||||||
|
# Set up logging
|
||||||
|
logging.basicConfig(level=logging.INFO)
|
||||||
|
|
||||||
@app.route("/", methods=["GET"])
|
@app.route("/", methods=["GET"])
|
||||||
def index():
|
def index():
|
||||||
return "Welcome to this lesson"
|
"""Root endpoint for API status."""
|
||||||
|
return jsonify({
|
||||||
|
"status": "ok",
|
||||||
|
"message": "Welcome to the Chat Project API"
|
||||||
|
})
|
||||||
|
|
||||||
|
@app.route("/health", methods=["GET"])
|
||||||
|
def health():
|
||||||
|
"""Health check endpoint."""
|
||||||
|
return jsonify({"status": "healthy"}), 200
|
||||||
|
|
||||||
@app.route("/test", methods=["GET"])
|
@app.route("/test", methods=["GET"])
|
||||||
def test():
|
def test():
|
||||||
return "Test"
|
"""Simple test endpoint."""
|
||||||
|
return jsonify({"result": "Test successful"}), 200
|
||||||
|
|
||||||
@app.route("/hello", methods=["POST"])
|
@app.route("/hello", methods=["POST"])
|
||||||
def hello():
|
def hello():
|
||||||
# get message from request body { "message": "do this taks for me" }
|
"""
|
||||||
data = request.get_json()
|
Chat endpoint.
|
||||||
message = data.get("message", "")
|
Expects JSON: { "message": "your message" }
|
||||||
|
Returns: { "response": "LLM response" }
|
||||||
|
"""
|
||||||
|
try:
|
||||||
|
data = request.get_json(force=True)
|
||||||
|
message = data.get("message", "").strip()
|
||||||
|
if not message:
|
||||||
|
logging.warning("No message provided in request.")
|
||||||
|
return jsonify({"error": "No message provided."}), 400
|
||||||
|
|
||||||
|
logging.info(f"Received message: {message}")
|
||||||
response = call_llm(message, "You are a helpful assistant.")
|
response = call_llm(message, "You are a helpful assistant.")
|
||||||
return jsonify({
|
return jsonify({"response": response}), 200
|
||||||
"response": response
|
|
||||||
})
|
except Exception as e:
|
||||||
|
logging.error(f"Error in /hello endpoint: {e}")
|
||||||
|
return jsonify({"error": "Internal server error."}), 500
|
||||||
|
|
||||||
if __name__ == "__main__":
|
if __name__ == "__main__":
|
||||||
app.run(host="0.0.0.0", port=5000)
|
# Run the app with debug mode for development
|
||||||
|
app.run(host="0.0.0.0", port=5000, debug=True)
|
||||||
@ -1,29 +1,53 @@
|
|||||||
import os
|
import os
|
||||||
|
import logging
|
||||||
from openai import OpenAI
|
from openai import OpenAI
|
||||||
|
|
||||||
# To authenticate with the model you will need to generate a personal access token (PAT) in your GitHub settings.
|
# Configure logging
|
||||||
# Create your PAT token by following instructions here: https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens
|
logging.basicConfig(level=logging.INFO)
|
||||||
|
logger = logging.getLogger(__name__)
|
||||||
|
|
||||||
|
# Environment variable check for GitHub token
|
||||||
|
GITHUB_TOKEN = os.environ.get("GITHUB_TOKEN")
|
||||||
|
if not GITHUB_TOKEN:
|
||||||
|
logger.error("GITHUB_TOKEN environment variable not set.")
|
||||||
|
raise EnvironmentError("GITHUB_TOKEN environment variable not set.")
|
||||||
|
|
||||||
|
# Model and endpoint configuration
|
||||||
|
MODEL_NAME = os.environ.get("LLM_MODEL", "openai/gpt-4o-mini")
|
||||||
|
BASE_URL = os.environ.get("LLM_BASE_URL", "https://models.github.ai/inference")
|
||||||
|
|
||||||
|
# Initialize OpenAI client
|
||||||
client = OpenAI(
|
client = OpenAI(
|
||||||
base_url="https://models.github.ai/inference",
|
base_url=BASE_URL,
|
||||||
api_key=os.environ["GITHUB_TOKEN"],
|
api_key=GITHUB_TOKEN,
|
||||||
)
|
)
|
||||||
|
|
||||||
def call_llm(prompt: str, system_message: str):
|
def call_llm(prompt: str, system_message: str, temperature: float = 1.0, max_tokens: int = 4096, top_p: float = 1.0) -> str:
|
||||||
|
"""
|
||||||
|
Calls the LLM with the given prompt and system message.
|
||||||
|
Returns the model's response as a string.
|
||||||
|
"""
|
||||||
|
try:
|
||||||
|
logger.info(f"Calling LLM model '{MODEL_NAME}' with prompt: {prompt}")
|
||||||
response = client.chat.completions.create(
|
response = client.chat.completions.create(
|
||||||
messages=[
|
messages=[
|
||||||
{
|
{"role": "system", "content": system_message},
|
||||||
"role": "system",
|
{"role": "user", "content": prompt}
|
||||||
"content": system_message,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"role": "user",
|
|
||||||
"content": prompt,
|
|
||||||
}
|
|
||||||
],
|
],
|
||||||
model="openai/gpt-4o-mini",
|
model=MODEL_NAME,
|
||||||
temperature=1,
|
temperature=temperature,
|
||||||
max_tokens=4096,
|
max_tokens=max_tokens,
|
||||||
top_p=1
|
top_p=top_p
|
||||||
)
|
)
|
||||||
|
content = response.choices[0].message.content
|
||||||
|
logger.info("LLM response received successfully.")
|
||||||
|
return content
|
||||||
|
except Exception as e:
|
||||||
|
logger.error(f"Error calling LLM: {e}")
|
||||||
|
return "Sorry, there was an error processing your request."
|
||||||
|
|
||||||
return response.choices[0].message.content
|
# Example usage (for testing)
|
||||||
|
if __name__ == "__main__":
|
||||||
|
test_prompt = "Hello, how are you?"
|
||||||
|
test_system = "You are a friendly assistant."
|
||||||
|
print(call_llm(test_prompt, test_system))
|
||||||
@ -1,3 +1,108 @@
|
|||||||
.app-nav ul li {
|
.app-nav ul li {
|
||||||
width: max-content;
|
width: max-content;
|
||||||
}
|
}
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', Arial, sans-serif;
|
||||||
|
}
|
||||||
|
/* Body and Typography */
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', Arial, sans-serif;
|
||||||
|
background: #f7f8fa;
|
||||||
|
color: #222;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header Styling */
|
||||||
|
h1, h2, h3 {
|
||||||
|
font-weight: 700;
|
||||||
|
margin-top: 1.5em;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 i, h2 i, h3 i {
|
||||||
|
color: #0078d4;
|
||||||
|
margin-right: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navigation Bar */
|
||||||
|
.app-nav {
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||||||
|
padding: 1em 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-nav ul {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
gap: 2em;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-nav ul li {
|
||||||
|
width: max-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-nav a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #0078d4;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-nav a:hover {
|
||||||
|
color: #005fa3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Card Component */
|
||||||
|
.card {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 4px 16px rgba(0,0,0,0.07);
|
||||||
|
padding: 2em;
|
||||||
|
margin: 2em 0;
|
||||||
|
transition: box-shadow 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover {
|
||||||
|
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Button Styling */
|
||||||
|
.button {
|
||||||
|
background: #0078d4;
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 0.75em 1.5em;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
background: #005fa3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Font Awesome Icon Styling */
|
||||||
|
.fa {
|
||||||
|
margin-right: 0.5em;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Layout */
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.app-nav ul {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1em;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue