SHARE
TWEET

Untitled

a guest Oct 21st, 2019 81 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Agenda telefonică</title>
  5.  
  6.     <style type="text/css">
  7.  
  8.         body {
  9.             font-family: tahoma;
  10.             font-size: 11pt;
  11.             line-height: 1.2em;
  12.             margin: 0;
  13.             padding: 12px;
  14.         }
  15.  
  16.         h1 {
  17.             background-color: Navy;
  18.             color: White;
  19.             margin: 0;
  20.             padding: 16px;
  21.             margin: -12px -12px 20px -12px;
  22.         }
  23.  
  24.         table {
  25.             border: 1px solid Gray;
  26.             border-collapse: collapse;
  27.             text-align: left;
  28.         }
  29.  
  30.         td, th {
  31.             padding: 8px 12px;
  32.             border-bottom: 1px solid Gray;
  33.         }
  34.  
  35.         th {
  36.             background-color: #EEEEEE;
  37.         }
  38.  
  39.  
  40.         caption {
  41.             padding: 8px 12px;
  42.             border: 1px solid Gray;
  43.             border-bottom: none;
  44.             background-color: #E0E0E0;
  45.             font-weight: bold;
  46.         }
  47.  
  48.         tfoot {
  49.             background-color: #EEEEEE;
  50.             font-weight: bold;
  51.         }
  52.  
  53.  
  54.         form {
  55.             border: 1px solid Gray;
  56.             border-radius: 5px;
  57.             background-color: #EEEEEE;
  58.             padding: 16px;
  59.             float:right;
  60.         }
  61.  
  62.         label {
  63.         }
  64.  
  65.         input {
  66.             font-size: 11pt;
  67.         }
  68.  
  69.             input[type="button"] {
  70.                 font-weight: bold;
  71.                 padding: 5px;
  72.             }
  73.  
  74.             table{
  75.                 float:left;
  76.                 width:60%;
  77.             }
  78.  
  79.             form{
  80.                 float: right;
  81.                 width:30%;
  82.             }
  83.  
  84.             label{
  85.                 display:block;
  86.                 float:left;
  87.                 clear:both;
  88.                 width:30%
  89.                
  90.             }
  91.  
  92.             input{
  93.                 display:block;
  94.                 float:right;
  95.                 width:60%;
  96.                 margin:4px;
  97.             }
  98.  
  99.             h1{
  100.               /* position: relative; */
  101.               /* arata exact ca pana acum doar ca
  102.                 daca noi ii spunem top 100 se duce de la ultimul punct vede unde
  103.                 sunt 100px si il deseneaza aici, dar spatiul lui ramane insemnat
  104.                 acolo unde era initial
  105.                 si la fel pe orizontala*/
  106.  
  107.                 /*position:absolute;*/
  108.  
  109.                 position:fixed; /*el nu mai e pozitionat fata de parinte
  110.                 ca la relativ, este poz fata de fereastra*/
  111.  
  112.                 top:50px;
  113.                 left:-60px;
  114.                 /*daca avem poz abs el o sa caute mereu primul parinte*/
  115.                
  116.             }
  117.     </style>
  118.     <script type="text/javascript">
  119.        
  120.         /*vrem sa ne apeleze functia cand a term de incarcat pagina*/
  121.  
  122.         document.addEventListener('DOMContentLoaded', appStart);
  123.  
  124.         function appStart(){
  125.             document.querySelector('#btnAdauga').addEventListener('click',adauga);
  126.  
  127.  
  128.         }
  129.  
  130.         function adauga(){
  131.             var nume= document.querySelector('#nume').value;
  132.             var prenume= document.querySelector('#prenume').value;
  133.             var telefon = document.querySelector('#telefon').value;
  134.  
  135.             var tbody = document.querySelector('tbody');
  136.  
  137.             var rand = document.createElement('tr');
  138.             tbody.append(rand);
  139.  
  140.             let adaugaCelula= text => {
  141.  
  142.            
  143.             var celula = document.createElement('td');
  144.             celula.innerText = text;
  145.             rand.append(celula);
  146.             };
  147.  
  148.             adaugaCelula(nume);
  149.             adaugaCelula(prenume);
  150.             adaugaCelula(telefon);
  151.         }
  152.     </script>
  153. </head>
  154. <body>
  155.     <h1>Agenda telefonică</h1>
  156.     <table>
  157.         <caption>
  158.             Lista persoane
  159.         </caption>
  160.         <thead>
  161.             <tr>
  162.                 <th>Nume</th>
  163.                 <th>Prenume</th>
  164.                 <th>Telefon</th>
  165.             </tr>
  166.         </thead>
  167.         <tbody>
  168.             <tr>
  169.                 <td>Popescu</td>
  170.                 <td>Ion</td>
  171.                 <td>023423222</td>
  172.             </tr>
  173.             <tr>
  174.                 <td>Vasilescu</td>
  175.                 <td>Maria</td>
  176.                 <td>073423222</td>
  177.             </tr>
  178.         </tbody>
  179.         <tfoot>
  180.             <tr>
  181.                 <td colspan="3">Număr persoane: 2</td>
  182.             </tr>
  183.         </tfoot>
  184.     </table>
  185.     <form action="#" class="controls">
  186.         <label for="nume">Nume:</label>
  187.         <input name="nume" id="nume">
  188.  
  189.         <label for="prenume">Prenume:</label>
  190.         <input name="prenume" id="prenume">
  191.  
  192.         <label for="Telefon">Telefon:</label>
  193.         <input name="telefon" id="telefon">
  194.  
  195.         <input type="button" id="btnAdauga" name="btnAdauga" value="Adaugă">
  196.     </form>
  197. </body>
  198. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top