Exam in
32 HTML, JavaScript, CSS, Python, and Django coding tasks — expand any question to read the model answer and explanation.
Given a paragraph element in an HTML file, write a complete snippet to: 1. Display the text "My favorite subject is English Arabic" where "English" is struck-through and "Arabic" is underlined. 2. Add a button labeled "Style" that, when clicked, changes the paragraph's: - Font color to green - Font size to 14px - Font family to Arial
Given a task status area on a page, write a complete HTML and JavaScript snippet to: 1. Write an HTML `<div>` with the id 'status' and the text 'Pending'. 2. Write a JavaScript function `completeTask()` that changes the text of this div to 'Completed'. 3. Add a button that calls this function when clicked.
Given a scores array in JavaScript, write a complete snippet to: 1. Start with `const scores = [45, 80, 89, 30, 95];` and use the `.filter()` method to create a new array called `passingScores` that only contains numbers greater than 50. 2. Log the result using `console.log()`.
Write a complete JavaScript snippet using async/await to: 1. Define an `async` function named `loadData()`. 2. Inside the function, await a hypothetical promise-returning function called `fetchData()`. If it succeeds, log the result to the console. 3. Wrap the await call in a try/catch block, and log any error in the catch block.
Given a navigation menu using the class `.nav-menu`, write complete CSS rules to: 1. Make all `<a>` tags inside `.nav-menu` have no text decoration. 2. When the user hovers over these links, change their text color to `red`.
Given a student record stored in a JavaScript object, write a complete snippet to: 1. Create an object named `student` with properties `name` ('Ali') and `gpa` (3.8). 2. Use `document.writeln()` to output: 'Ali has a GPA of 3.8' by dynamically accessing the object's properties.
Write a complete HTML snippet for a simple login form to: 1. Include an `<input>` for the username. 2. Add an `<input>` for the password (which hides the typed characters). 3. Add a submit `<button>` labeled 'Login'.
Given a result element with id 'result' on the page, write a complete JavaScript AJAX snippet to: 1. Use the `XMLHttpRequest` object to send a GET request to 'api/data'. 2. If the request is successful (readyState is 4 and status is 200), update the element's `innerHTML` to the response text.
Given the traditional function `function(a, b) { return a * b; }`, write a complete JavaScript snippet to: 1. Convert it to an ES6 arrow function and assign it to a const variable `multiply`.
Write a complete JavaScript snippet to: 1. Save the string 'Guest' under the key 'username' in the browser's HTML5 `localStorage` using a single statement.
Write complete CSS rules for a Flexbox layout to: 1. Target a class named `.container` and set `display: flex`. 2. Center its child elements horizontally using `justify-content: center`. 3. Center its child elements vertically using `align-items: center`.
Given an image element with the id 'lightbulb', write a complete JavaScript snippet to: 1. Define a function `turnOn()` that finds the image. 2. Change its `src` attribute to 'pic_bulbon.gif'.
Write complete CSS rules for a dashboard layout to: 1. Make an element with the class `.dashboard` display as a CSS Grid container. 2. Define exactly 3 columns of equal width using `grid-template-columns`.
Given an array `const servers = [{host: 'Alpha'}, {host: 'Beta'}];`, write a complete JavaScript snippet to: 1. Use the ES6 `.map()` method with arrow function syntax. 2. Create a new array called `serverNames` containing only the host strings.
Write a complete JavaScript snippet using ES6 syntax to: 1. Define an arrow function named `greet` that takes one parameter `name` with default value 'User'. 2. Return the string 'Welcome ' concatenated with the name.
Write a complete HTML, CSS, and JavaScript snippet to implement a dark-mode toggle: 1. Create a button labeled 'Toggle Theme'. 2. Write a JavaScript function that toggles a CSS class `.dark-mode` on the `<body>` element when the button is clicked. 3. Include a `<style>` block for `.dark-mode` setting the background to black and text to white.
Write a complete JavaScript AJAX snippet to: 1. Send an `XMLHttpRequest` GET request to 'api/config'. 2. When the response loads successfully (`readyState` is 4 and `status` is 200), parse `responseText` as JSON. 3. Log the resulting object to the console.
Write a complete JavaScript snippet using Promises to: 1. Create a function `checkStatus()` that returns a new Promise. 2. Inside the promise, use `setTimeout` to wait 1000 milliseconds, then call `resolve('System Operational')`. 3. Execute `checkStatus().then()` and log the resolved message to the console.
Write a complete HTML and JavaScript snippet for client-side form validation to: 1. Create a form (id 'authForm') with a password input (id 'pwd') and a submit button. 2. Add a JavaScript event listener for the form's 'submit' event. 3. If the password length is less than 8 characters, prevent the default submission and show an alert.
Given an array of strings `const labels = ['Secure', 'Fast', 'Scalable'];`, write a complete JavaScript snippet to: 1. Use the `.reduce()` method to concatenate them into a single hyphen-separated string (e.g., 'Secure-Fast-Scalable'). 2. Assign the result to a variable `tagline`.
Write a complete HTML and JavaScript snippet for a tab switcher to: 1. Include two buttons and two content divs (ids 'panel1' and 'panel2'). 2. Write a JS function `switchTab(targetId)` that hides both panels by setting their CSS `display` to 'none'. 3. Show the panel matching `targetId` by setting its `display` to 'block'.
Write a complete JavaScript snippet using ES6 classes to: 1. Define a class named `Admin` with a constructor that accepts a `role` parameter. 2. Add a method `getAccess()` that returns the string 'Access level: [role]'. 3. Instantiate a new `Admin` with role 'Superuser' and log their access level.
Given the HTML `<div class='wrapper'><p id='node'>Data</p></div>`, write a complete JavaScript snippet to: 1. Target the element with id 'node'. 2. Traverse up to its parent node and add the CSS class 'highlight' to that parent.
Given a `<ul>` with the id 'nav-list' containing several `<li>` items, write a complete JavaScript snippet using event delegation to: 1. Add a single 'click' event listener to the `<ul>`. 2. In the handler, check if the clicked target is an `<li>` element. 3. If it is, log its `innerText`.
Write a complete HTML, CSS, and JavaScript snippet for a connection status badge to: 1. Create a `<span>` with the id 'indicator', default text 'Disconnected', and a CSS class `.err` that makes text red. 2. Include CSS for `.success` that makes text green. 3. Write a JS function `establishConnection()` that sets the text to 'Connected', removes `.err`, and adds `.success`.
Write complete Python code for a Django model to: 1. Define a Model named `Product` that inherits from `models.Model`. 2. Add a `name` field (CharField, max length 100) and a `price` field (IntegerField).
Write complete Python code for a Django view to: 1. Define a function-based view named `home_view` that takes a `request` object. 2. Return an `HttpResponse` containing the HTML string '<h1>Welcome to Django</h1>'.
Write a complete Django HTML template snippet to: 1. Expect a context variable `users` (a list of names). 2. Use a Django template loop (`{% for %}`) to iterate over the list and display each name inside an `<li>` tag within a `<ul>` container.
Write a complete Django `urls.py` snippet to: 1. Import `path` and `views`. 2. Define a `urlpatterns` list and add a path for 'contact/' that routes to `views.contact_view` and assigns it the name 'contact'.
Write complete Python code to: 1. Define a function `get_grade(name)` that checks if a name exists in a dictionary `grades = {'Ahmed': 'A', 'Mona': 'B'}`. 2. If the name exists, return the grade; otherwise return 'Not Found'.
Write complete Python code for a `Car` class to: 1. Define an `__init__` constructor that accepts and sets `make` and `year` attributes. 2. Add a method `display()` that returns a formatted string like '2020 Toyota'.
Write a complete Python snippet to: 1. Attempt to divide variable `a` by `b` and print the result. 2. Use a `try/except` block to catch a `ZeroDivisionError` specifically, and print 'Cannot divide by zero' if it occurs.