Tanmay Srivastava
1 year ago
parent
2f458c2267
commit
6b4769e15b
@ -1,11 +1,17 @@
|
||||
# Reading the Docs
|
||||
|
||||
## 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
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
| 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 = [
|
||||
'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
|
||||
'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 never make exceptions. An exception disproves the rule.',
|
||||
'What one man can invent another can discover.',
|
||||
'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.',
|
||||
"When you have eliminated the impossible, whatever remains, however improbable, must be the truth.",
|
||||
"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 never make exceptions. An exception disproves the rule.",
|
||||
"What one man can invent another can discover.",
|
||||
"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."
|
||||
];
|
||||
|
||||
// array for storing the words of the current challenge
|
||||
// State
|
||||
let words = [];
|
||||
// stores the index of the word the player is currently typing
|
||||
let wordIndex = 0;
|
||||
// default value for startTime (will be set on start)
|
||||
let startTime = Date.now();
|
||||
let startTime = 0;
|
||||
|
||||
// grab UI items
|
||||
const quoteElement = document.getElementById('quote');
|
||||
const messageElement = document.getElementById('message')
|
||||
const typedValueElement = document.getElementById('typed-value');
|
||||
// UI Elements
|
||||
const quoteElement = document.querySelector("#quote");
|
||||
const messageElement = document.querySelector("#message");
|
||||
const typedValueElement = document.querySelector("#typed-value");
|
||||
const startButton = document.querySelector("#start");
|
||||
|
||||
document.getElementById('start').addEventListener('click', function () {
|
||||
// get a quote
|
||||
const quoteIndex = Math.floor(Math.random() * quotes.length);
|
||||
const quote = quotes[quoteIndex];
|
||||
// Put the quote into an array of words
|
||||
words = quote.split(' ');
|
||||
// reset the word index for tracking
|
||||
wordIndex = 0;
|
||||
// Messages system
|
||||
const messages = {
|
||||
success: (seconds) => `🎉 Congratulations! You finished in ${seconds.toFixed(2)} seconds.`,
|
||||
error: "⚠️ Oops! There's a mistake.",
|
||||
start: "⌨️ Start typing to begin the game."
|
||||
};
|
||||
|
||||
// UI updates
|
||||
// Create an array of span elements so we can set a class
|
||||
const spanWords = words.map(function (word) { return `<span>${word} </span>` });
|
||||
// Convert into string and set as innerHTML on quote display
|
||||
quoteElement.innerHTML = spanWords.join('');
|
||||
// Highlight the first word
|
||||
quoteElement.childNodes[0].className = 'highlight';
|
||||
// Clear any prior messages
|
||||
messageElement.innerText = '';
|
||||
// Utility: pick random quote
|
||||
const getRandomQuote = () => quotes[Math.floor(Math.random() * quotes.length)];
|
||||
|
||||
// Setup the textbox
|
||||
// Clear the textbox
|
||||
typedValueElement.value = '';
|
||||
// set focus
|
||||
typedValueElement.focus();
|
||||
// set the event handler
|
||||
// Utility: render quote as spans
|
||||
const renderQuote = (quote) => {
|
||||
quoteElement.innerHTML = quote
|
||||
.split(" ")
|
||||
.map((word, i) => `<span ${i === 0 ? 'class="highlight"' : ""}>${word}</span>`)
|
||||
.join(" ");
|
||||
};
|
||||
|
||||
// Start the timer
|
||||
startTime = new Date().getTime();
|
||||
// Utility: highlight current word
|
||||
const highlightWord = (index) => {
|
||||
[...quoteElement.children].forEach((el, i) => {
|
||||
el.classList.toggle("highlight", i === index);
|
||||
});
|
||||
};
|
||||
|
||||
// Game start
|
||||
const startGame = () => {
|
||||
const quote = getRandomQuote();
|
||||
words = quote.split(" ");
|
||||
wordIndex = 0;
|
||||
renderQuote(quote);
|
||||
|
||||
typedValueElement.addEventListener('input', (e) => {
|
||||
// Get the current word
|
||||
messageElement.textContent = messages.start;
|
||||
typedValueElement.value = "";
|
||||
typedValueElement.focus();
|
||||
|
||||
startTime = Date.now();
|
||||
};
|
||||
|
||||
// Typing logic
|
||||
const handleTyping = () => {
|
||||
const currentWord = words[wordIndex];
|
||||
// get the current value
|
||||
const typedValue = typedValueElement.value;
|
||||
|
||||
if (typedValue === currentWord && wordIndex === words.length - 1) {
|
||||
// end of quote
|
||||
// Display success
|
||||
const elapsedTime = new Date().getTime() - startTime;
|
||||
const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`;
|
||||
messageElement.innerText = message;
|
||||
} else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
|
||||
// end of word
|
||||
// clear the typedValueElement for the new word
|
||||
typedValueElement.value = '';
|
||||
// move to the next word
|
||||
// Game finished
|
||||
const elapsedTime = (Date.now() - startTime) / 1000;
|
||||
messageElement.textContent = messages.success(elapsedTime);
|
||||
typedValueElement.disabled = true;
|
||||
} else if (typedValue.endsWith(" ") && typedValue.trim() === currentWord) {
|
||||
// Word completed
|
||||
typedValueElement.value = "";
|
||||
wordIndex++;
|
||||
// reset the class name for all elements in quote
|
||||
for (const wordElement of quoteElement.childNodes) {
|
||||
wordElement.className = '';
|
||||
}
|
||||
// highlight the new word
|
||||
quoteElement.childNodes[wordIndex].className = 'highlight';
|
||||
highlightWord(wordIndex);
|
||||
} else if (currentWord.startsWith(typedValue)) {
|
||||
// currently correct
|
||||
// highlight the next word
|
||||
typedValueElement.className = '';
|
||||
// Correct so far
|
||||
typedValueElement.classList.remove("error");
|
||||
} else {
|
||||
// error state
|
||||
typedValueElement.className = 'error';
|
||||
// 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 llm import call_llm
|
||||
from flask_cors import CORS
|
||||
import logging
|
||||
|
||||
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"])
|
||||
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"])
|
||||
def test():
|
||||
return "Test"
|
||||
"""Simple test endpoint."""
|
||||
return jsonify({"result": "Test successful"}), 200
|
||||
|
||||
@app.route("/hello", methods=["POST"])
|
||||
def hello():
|
||||
# get message from request body { "message": "do this taks for me" }
|
||||
data = request.get_json()
|
||||
message = data.get("message", "")
|
||||
"""
|
||||
Chat endpoint.
|
||||
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.")
|
||||
return jsonify({
|
||||
"response": response
|
||||
})
|
||||
return jsonify({"response": response}), 200
|
||||
|
||||
except Exception as e:
|
||||
logging.error(f"Error in /hello endpoint: {e}")
|
||||
return jsonify({"error": "Internal server error."}), 500
|
||||
|
||||
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 logging
|
||||
from openai import OpenAI
|
||||
|
||||
# To authenticate with the model you will need to generate a personal access token (PAT) in your GitHub settings.
|
||||
# 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
|
||||
# Configure logging
|
||||
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(
|
||||
base_url="https://models.github.ai/inference",
|
||||
api_key=os.environ["GITHUB_TOKEN"],
|
||||
base_url=BASE_URL,
|
||||
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(
|
||||
messages=[
|
||||
{
|
||||
"role": "system",
|
||||
"content": system_message,
|
||||
},
|
||||
{
|
||||
"role": "user",
|
||||
"content": prompt,
|
||||
}
|
||||
{"role": "system", "content": system_message},
|
||||
{"role": "user", "content": prompt}
|
||||
],
|
||||
model="openai/gpt-4o-mini",
|
||||
temperature=1,
|
||||
max_tokens=4096,
|
||||
top_p=1
|
||||
model=MODEL_NAME,
|
||||
temperature=temperature,
|
||||
max_tokens=max_tokens,
|
||||
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 {
|
||||
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